<template>
  <NavBar></NavBar>
   <div ref="vantaRef" class="background_bottom"></div>
  <div class="menu-box">
    <div class="card map-card" @click="goToMap">牛场地图</div>
    <div class="card management-card" @click="goToManagement">牛只管理</div>
    <div class="card sickness-card" @click="goToSickness">生病情况</div>
    <div class="card finance-card" @click="goToFinance">经济情况</div>
  </div>
</template>

<script>
import router from "@/router";
import NavBar from "@/components/NavBar.vue";
import * as THREE from 'three'
import CLOUDS from 'vanta/src/vanta.clouds'

export default {
  name: "CattleHome",
  components: { NavBar },

  setup() {

    // 跳转到牛场地图页面
    const goToMap = () => {
      router.push({ name: "map_index" });
    };

    // 跳转到管理页面
    const goToManagement = () => {
      router.push({ name: "management_index" });
    };

    // 跳转到生病情况页面
    const goToSickness = () => {
      router.push({ name: "sickness_index" });
    };

    // 跳转到经济情况页面（暂未创建）
    const goToFinance = () => {
      router.push({ name: "finance_index" });
    };

    return {
      goToMap,
      goToManagement,
      goToSickness,
      goToFinance
    };
  },

  mounted() {
    this.vantaEffect = CLOUDS({
      el: this.$refs.vantaRef,
      THREE: THREE,
      mouseControls: true,
      touchControls: true,
      gyroControls: false,
      minHeight: 200.0,
      minWidth: 200.0,
      skyColor: 0x26b9f2,
      cloudColor: 0xb7c9e8,
      cloudShadowColor: 0x2f3a48,
      sunColor: 0x5c452f,
      sunGlareColor: 0xd4a798,
      sunlightColor: 0xdc9c59,
      speed: 1.2,

    });

  },
  beforeUnmount() {
    if (this.vantaEffect) {
      this.vantaEffect.destroy();
    }
  },
};
</script>

<style scoped>
.menu-box {
  margin: auto;
  padding-top: 100px;
  width: 500px;
  height: 80vh;
  background-color: transparent;
  display: flex;
  flex-direction: column;
  justify-content: center; /* 垂直居中 */
  align-items: center; /* 水平居中 */
  gap: 20px;
}

.card {
  width: 20vw;
  height: 10vh;
  font-size: 18px;
  background: #fff;
  border: none;
  border-radius: 10px;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: 0.8s;
  user-select: none;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.card:hover {
  box-shadow: 0 8px 16px rgba(68, 60, 60, 0.2);
  background: #505050;
  color: #fff;
  transition: 0.8s;
  letter-spacing: 4px;
  font-size: 20px;
}

.map-card {
  background: linear-gradient(45deg, #ff6b6b, #ffe66d);
}

.management-card {
  background: linear-gradient(45deg, #ff6b6b, #ff9f1c);
}

.sickness-card {
  background: linear-gradient(45deg, #ff6b6b, #a55eea);
}

.finance-card {
  background: linear-gradient(45deg, #ff6b6b, #4bcffa);
}
</style>